<template>
  <div class="CommodityInformationManagementEdit">
    <div class="CommodityInformationManagementEdit-one">
      <div>
        <div></div>
        <div>编辑内容</div>
      </div>
      <div>
        <el-button type="primary" @click="onSubmit">保 存</el-button>
      </div>
    </div>
    <div class="CommodityInformationManagementEdit-two" v-if="detail">
      <div>
        套装编码：
        <span>{{ detail.package_number }}</span>
      </div>
    </div>
    <div class="CommodityInformationManagementEdit-three">
      <div class="CommodityInformationManagementEdit-three-one">所属标签</div>
      <div class="CommodityInformationManagementEdit-three-two">
        <div>
          <div>形制</div>
          <el-select v-model="form.formid" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div>上新年份： {{ new_year }}年</div>
        <div>上新月份： {{ new_month }}月</div>
      </div>
      <div class="CommodityInformationManagementEdit-three-three">
        <div>
          <div>添加标签</div>
          <div>
            <el-cascader
              ref="cascader"
              placeholder="可搜索"
              :options="optionsTag"
              filterable
              closable
              :props="props"
              @change="onChangeTag"
            ></el-cascader>
          </div>
          <el-button
            type="text"
            icon="el-icon-refresh-right"
            @click="onAdminTagUpdate"
            >更新标签</el-button
          >
          <el-button
            type="primary"
            plain
            icon="el-icon-price-tag"
            @click="onAdminTag"
            >管理标签</el-button
          >
        </div>
        <div class="CommodityInformationManagementEdit-three-three-two">
          <el-tag
            v-for="tag in taglist"
            :key="tag.id"
            closable
            effect="dark"
            :color="tag.font_color"
            @close="handleClose(tag)"
            >{{ tag.title }}</el-tag
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  postAdminOperateGetfromlist,
  postAdminOperateGetProductsLook_tao,
  postAdminOperateGetLabelsearch,
  postAdminOperateGetProductsLabellist,
  postAdminOperateSetProductsLabel_new,
} from "@/api";
export default {
  data() {
    return {
      options: [],
      optionsTag: [],
      props: {
        value: "id",
        label: "title",
        children: "list",
      },
      detail: "",
      form: {
        package_number: "",
        formid: "",
        labelids: "",
      },
      new_year: "",
      new_month: "",
      taglist: [],
    };
  },
  activated() {
    let id = this.$route.query.id;
    console.log(id,id != this.form.package_number);
    this.postAdminOperateGetfromlist();
      this.postAdminOperateGetProductsLabellist();
    if (id != this.form.package_number) {
      this.form.package_number = id;
      console.log("id------------>", id);
      this.postAdminOperateGetProductsLook_tao(id);
    }
  },
  methods: {
    onAdminTagUpdate() {
      this.postAdminOperateGetProductsLabellist();
    },
    onAdminTag() {
      this.$router.push({ name: "OperationalDepartmentTag" });
    },
    // 删除标签
    handleClose(tag) {
      this.taglist.splice(this.taglist.indexOf(tag), 1);
    },
    // 标签改变时
    onChangeTag(e) {
      this.$nextTick(() => {
        let nodesObj = this.$refs["cascader"].getCheckedNodes();
        console.log("nodesObj--》", nodesObj);
        let data = nodesObj[0].data;
        let taglist = this.taglist;
        let istrue = taglist.some((item) => item.id == data.id);
        console.log("istrue--》", istrue);
        data.font_color = nodesObj[0].parent.data.font_color;
        if (!istrue) taglist.push(data);
        console.log("标签改变时详细数据--》", data);
      });
    },
    // 商品详情
    postAdminOperateGetProductsLook_tao(id) {
      let obj = {
        package_number: id,
      };
      postAdminOperateGetProductsLook_tao(obj).then((res) => {
        console.log("商品详情---->", res);
        let data = res.data;
        this.form.formid = data.fromdata.id;
        this.new_year = data.new_year;
        this.new_month = data.new_month;
        this.taglist = data.label;
        this.detail = data;
      });
    },
    // 形制列表
    postAdminOperateGetfromlist() {
      postAdminOperateGetfromlist().then((res) => {
        console.log("形制--------->", res);
        this.options = res.data.formdata;
      });
    },
    // 标签列表
    postAdminOperateGetProductsLabellist() {
      postAdminOperateGetProductsLabellist().then((res) => {
        this.optionsTag = res.data.label;
      });
    },
    // 保存
    onSubmit() {
      let { form, taglist } = this;
      let formClone = JSON.parse(JSON.stringify(form));
      if (taglist.length) {
        taglist.forEach((item, index) => {
          if (index == 0) {
            formClone.labelids += `${item.id}`;
          } else {
            formClone.labelids += `,${item.id}`;
          }
        });
      }
      postAdminOperateSetProductsLabel_new(formClone).then((res) => {
        console.log("保存----》", res);
        this.$message.success("编辑成功");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.CommodityInformationManagementEdit {
  .CommodityInformationManagementEdit-one {
    display: flex;
    justify-content: space-between;
    align-items: center;
    > div:nth-child(1) {
      display: flex;
      align-items: center;
      font-weight: 800;
      > div:nth-child(1) {
        background: #409eff;
        width: 4px;
        height: 30px;
        border-radius: 2px;
        margin-right: 10px;
      }
    }
  }
  .CommodityInformationManagementEdit-two {
    margin-top: 10px;
    display: flex;
    background: #ffffff;
    padding: 20px;
    border-radius: 4px;
    align-items: center;
    min-height: 100px;
    .el-image {
      width: 100px;
      margin-right: 10px;
    }
    > div {
      //   display: flex;
      flex-direction: column;
      justify-content: space-between;
      > div:nth-child(1) {
        font-weight: 800;
        padding-bottom: 10px;
      }
      > div:nth-child(2) {
        display: flex;
        font-size: 14px;
        padding-bottom: 5px;
        > div {
          margin-right: 20px;
          padding-right: 20px;
          > span {
            margin-left: 10px;
          }
        }
        > div:nth-child(1) {
          border-right: 1px solid #efefef;
        }
      }
      > div:nth-child(3) {
        display: flex;
        font-size: 14px;
        color: #666666;
        > span {
          margin-left: 10px;
        }
      }
    }
  }
  .CommodityInformationManagementEdit-three {
    margin-top: 10px;
    background: #ffffff;
    padding: 20px;
    border-radius: 4px;
    .CommodityInformationManagementEdit-three-one {
      font-weight: 800;
    }
    .CommodityInformationManagementEdit-three-two {
      padding: 20px 0;
      border-bottom: 1px solid #efefef;
      display: flex;
      align-items: center;
      > div {
        margin-right: 100px;
      }
      > div:nth-child(1) {
        display: flex;
        align-items: center;
        > div {
          margin-right: 10px;
        }
      }
    }
    .CommodityInformationManagementEdit-three-three {
      margin-top: 20px;
      > div:nth-child(1) {
        display: flex;
        align-items: center;
        > div {
          margin-right: 10px;
        }
      }
      .CommodityInformationManagementEdit-three-three-two {
        margin-top: 20px;
        > span {
          margin-right: 20px;
        }
      }
    }
  }
}
</style>